<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CCRM管理平台</title>
    <link href="../styles/dpl-min.css" rel="stylesheet"/>
    <link href="../styles/bui-min.css" rel="stylesheet"/>
    <link href="../styles/main.css" rel="stylesheet"/>
</head>
<body>

<!--列表页-->
<div class="container">
    <form id="searchForm" class="form-panel">
        <ul class="panel-content">
            <li>
                <span>
                  <label>TokenId：</label><input type="text" class="control-text" name="licenseToken.token_id"/>
                </span>
                <span>
                  <label>LicenseToken：</label><input type="text" class="control-text" name="licenseToken.license_token"/>
                </span>
                                <span>
                  <label>UserId：</label><input type="text" class="control-text" name="licenseToken.user_id"/>
                </span>
                                <span>
                  <label>Num：</label><input type="text" class="control-text" name="licenseToken.num"/>
                </span>
                                <span>
                  <label>Type：</label><input type="text" class="control-text" name="licenseToken.type"/>
                </span>
                                <span>
                  <label>Status：</label><input type="text" class="control-text" name="licenseToken.status"/>
                </span>
                                <span>
                  <label>LicenseLogId：</label><input type="text" class="control-text" name="licenseToken.license_log_id"/>
                </span>
                                <span>
                  <label>Remark：</label><input type="text" class="control-text" name="licenseToken.remark"/>
                </span>
                                <span>
                  <label>CreateTime：</label><input type="text" class="control-text" name="licenseToken.create_time"/>
                </span>
                                <span>
                  <label>DueTime：</label><input type="text" class="control-text" name="licenseToken.due_time"/>
                </span>


                <button type="button" id="btnSearch" class="button button-primary">搜索</button>
            </li>
        </ul>
    </form>

    <div class="search-grid-container">
        <div id="grid"></div>
    </div>
</div>

<!--表单页-->
<div id="ModelFormDialog" style="display: none">
    <form id="ModelForm" class="form-horizontal">
        <div class="control-group">
            <label class="control-label">TokenId：</label>

            <div class="controls"><input class="input-normal control-text" type="text" name="licenseToken.token_id"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">LicenseToken：</label>

            <div class="controls"><input class="input-normal control-text" type="text" name="licenseToken.license_token"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">UserId：</label>

            <div class="controls"><input class="input-normal control-text" type="text" name="licenseToken.user_id"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">Num：</label>

            <div class="controls"><input class="input-normal control-text" type="text" name="licenseToken.num"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">Type：</label>

            <div class="controls"><input class="input-normal control-text" type="text" name="licenseToken.type"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">Status：</label>

            <div class="controls"><input class="input-normal control-text" type="text" name="licenseToken.status"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">LicenseLogId：</label>

            <div class="controls"><input class="input-normal control-text" type="text" name="licenseToken.license_log_id"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">Remark：</label>

            <div class="controls"><input class="input-normal control-text" type="text" name="licenseToken.remark"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">CreateTime：</label>

            <div class="controls"><input class="input-normal control-text" type="text" name="licenseToken.create_time"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">DueTime：</label>

            <div class="controls"><input class="input-normal control-text" type="text" name="licenseToken.due_time"/>
            </div>
        </div>
        <div class="row form-actions actions-bar">
            <div class="span13 offset3 ">
                <button type="submit" class="button button-primary">保存</button>
                <button type="reset" class="button">重置</button>
            </div>
        </div>
    </form>
</div>

<script src="../scripts/common/main.js"></script>
<script src="../scripts/common/search.js"></script>
<script type="text/javascript">
    var URI = "../clmp/licenseToken", MODULE = 'licenseToken';
    BUI.use(['common/search', 'bui/overlay', 'bui/form'], function (Search, Overlay, Form) {
        var columns = [
                    {title: 'token_id', dataIndex: 'token_id', width: '10%'},
                    {title: 'license_token', dataIndex: 'license_token', width: '10%'},
                    {title: 'user_id', dataIndex: 'user_id', width: '10%'},
                    {title: 'num', dataIndex: 'num', width: '10%'},
                    {title: 'type', dataIndex: 'type', width: '10%'},
                    {title: 'status', dataIndex: 'status', width: '10%'},
                    {title: 'license_log_id', dataIndex: 'license_log_id', width: '10%'},
                    {title: 'remark', dataIndex: 'remark', width: '10%'},
                    {title: 'create_time', dataIndex: 'create_time', width: '10%'},
                    {title: 'due_time', dataIndex: 'due_time', width: '10%'},

                    {title: '操作', dataIndex: '', width: '8%', renderer: function (value, obj) {
                        var editStr = '<span class="grid-command btn-edit" title="编辑">编辑</span>',
                                delStr = '<span class="grid-command btn-del" title="删除">删除</span>';//页面操作不需要使用Search.createLink
                        return editStr + delStr;
                    }}
                ],
                store = Search.createStore(URI, {totalProperty: 'total'}),
                gridCfg = Search.createGridCfg(columns, {
                    tbar: {
                        items: [
                            {text: '<i class="icon-plus"></i>新建', btnCls: 'button button-small', handler: function () {
                                resetForm();
                                modelFormObject.set('action', URI);
                                modelFormObject.set('method', "POST");
                                modelFormDialog.show();
                            }},
                            {text: '<i class="icon-remove"></i>删除', btnCls: 'button button-small', handler: delFunction}
                        ]
                    },
                    emptyDataTpl: '<div style="padding: 20px" class="centered"><img alt="Crying" src="http://img03.taobaocdn.com/tps/i3/T1amCdXhXqXXXXXXXX-60-67.png"><h2>好像还没有数据</h2></div>',
                    plugins: [BUI.Grid.Plugins.CheckSelection] // 插件形式引入多选表格
                });

        var search = new Search({
                    store: store,
                    gridCfg: gridCfg
                }),
                grid = search.get('grid');
        //删除操作
        function delFunction() {
            var selections = grid.getSelection();
            delItems(selections);
        }

        function delItems(items) {
            var ids = [];
            BUI.each(items, function (item) {
                ids.push(item.token_id);
            });

            if (ids.length) {
                BUI.Message.Confirm('确认要删除选中的记录么？', function () {
                    $.ajax({
                        url: URI + "/" + ids.join("-"),
                        dataType: 'json',
                        type: 'DELETE',
                        data: {ids: ids},
                        success: function (data) {
                            if (data.status === 200) {
                                BUI.Message.Alert('操作成功');
                                search.load();
                            } else {
                                BUI.Message.Alert('删除失败！');
                            }
                        }
                    });
                }, 'question');
            }
        }

        //监听事件，删除一条记录
        grid.on('cellclick', function (ev) {
            var sender = $(ev.domTarget); //点击的Dom
            if (sender.hasClass('btn-del')) {
                var record = ev.record;
                delItems([record]);
            }
            if (sender.hasClass('btn-edit')) {
                var record = ev.record;
                edit(record);
            }
        });

        function edit(record) {
            var id = record.token_id;
            var obj = {};
            resetForm();
            modelFormObject.set('action', URI + "/" + id);
            modelFormObject.set('method', "POST");

            for (var name in record) {
                obj[MODULE + '.' + name] = record[name];
            }

            BUI.FormHelper.setFields($('#ModelForm')[0], obj);
            modelFormDialog.show();
        }

        function resetForm() {
            $('#ModelForm').find('input').val('');
            document.getElementById("ModelForm").reset();
        }

        var modelFormDialog = new Overlay.Dialog({
            title: '表单',
            width: 800,
            height: 600,
            mask: false,
            buttons: [],
            contentId: 'ModelFormDialog'
        });

        var modelFormObject = new Form.HForm({
            srcNode: '#ModelForm',
            submitType: 'ajax',
            callback: function (data) {
                if (data.status === 200) {
                    BUI.Message.Alert('操作成功');
                    modelFormDialog.hide();
                    search.load();
                } else {
                    BUI.Message.Alert('操作失败:' + data.msg);
                }
            }
        }).render();

    });
</script>
</body>
</html>